<template>
    <div class="app">
        <h2>这是App组件</h2>
        <!-- 
            1.如下代码是给Demo组件的的实例对象定义一个getdata事件
            只要组件实例对象触发了getdata事件，就回调用test函数
            2.推荐事件名的命名方式：get-data
            3.事件函数在数据接收方；事件在由数据发送方出发
         -->

        <Demo :test='test' @getdata='test'/>

        <!-- 自定义事件的第二种方式 -->
         <Demo ref="demo" />
    </div>
</template>

<script>
    import Demo from './components/Demo.vue'
    export default {
        components: { Demo },
        methods:{
            test(data){
                console.log(data);
            }
        },
        mounted(){
            //给ref=demo的组件添加getdata事件，事件出发时调用this.test()函数
            this.$refs.demo.$on('getdata',this.test);
        },
    }
</script>

<style>
    .app{
        background-color: green;
        padding: 20px;
    }
</style>